<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>资料类别管理</title>
<style>
body, html {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  background-color: #e7f2fb;
}

.header {
  background-color: #007bff;
  color: white;
  padding: 15px;
  text-align: center;
}

.add-category {
  display: block;
  width: 90%;
  margin: 10px auto;
  padding: 10px;
  background-color: #fff;
  text-align: center;
  border-radius: 5px;
  color: #007bff;
  cursor: pointer;
}

.category-list {
  margin: 10px;
  padding: 15px;
  background-color: #fff;
  border-radius: 5px;
}

.category-item {
  padding: 10px;
  border-bottom: 1px solid #e7e7e7;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-item:last-child {
  border-bottom: none;
}

.edit, .delete {
  color: #007bff;
  cursor: pointer;
}

/* Simple icon representation */
.icon {
  display: inline-block;
  width: 20px;
  text-align: center;
}

</style>
</head>
<body>

<div class="header">资料类别管理</div>

<button class="add-category">添加类别</button>

<div class="category-list">
  <div class="category-item">
    <span>单元练习</span>
    <span>
      <span class="edit icon">&#9998;</span>
      <span class="delete icon">&#10060;</span>
    </span>
  </div>
  <!-- More categories -->
</div>

</body>
</html>
